<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/echarts.js"></script>
    <script src="jq/jquery.js"></script>
    <style>
        .box {
            width: 600px;
            height: 400px;
            border: 1px solid #999;
            display: block;
        }
    </style>
</head>

<body>
    <div id="box1" class="box"></div>
    <input type="button" value="重置数据" onclick="show2()">
    <script>
        let box1Chart = echarts.init(document.querySelector("#box1"));
        function show() {

            $.ajax({
                url: "./data/data3.json",
                success: function (res) {
                    let arrs = [];
                    for (var i = 0; i < res.names.name.length; i++) {
                        arrs.push({
                            name: res.names.name[i],
                            value: res.values.value[i]
                        });
                    }


                    box1Chart.setOption({
                        tooltip: {

                        },
                        legend: {

                        },
                        dataset: {
                            source: arrs
                        },
                        series: [
                            {
                                name: "销量",
                                type: "pie",
                                left: 10,
                                radius: [0, 100],//数组的第一项是内半径，第二项是外半径
                                center: [400, 180],//圆心坐标
                                selectedMode: "series",//'single'，'multiple'，'series'

                            }
                        ]
                    });


                }
            });

        }
        async function show2() {
            let res = await $.ajax("./data/data3.json").promise();
            let arrs = [];
            for (var i = 0; i < res.names.name.length; i++) {
                arrs.push({
                    name: res.names.name[i],
                    value: res.values.value[i]
                });
            }
            box1Chart.setOption({
                tooltip: {

                },
                legend: {

                },
                dataset: {
                    source: arrs
                },
                series: [
                    {
                        name: "销量",
                        type: "pie",
                        left: 10,
                        radius: [0, 100],//数组的第一项是内半径，第二项是外半径
                        center: [400, 180],//圆心坐标
                        selectedMode: "series",//'single'，'multiple'，'series'

                    }
                ]
            });
        }
    </script>
</body>

</html>